<template>
  <div class="innerPageTable-box-OneTwo">
    <!-- 搜索区域 -->
    <SelfAdaption>
      <Form
        :model="searchForm"
        ref="resourceForm"
        slot="adaption-bar"
        label-position="top"
        class="ivu-form-no-margin-bottom"
        inline
      >
        <template>
          <!-- 资源编码 -->
          <Form-item prop="resourceCode" :label="$t('module.resourceManage.resCode')">
            <Input
              type="text"
              :maxlength="30"
              v-model.trim="searchForm.resourceCode"
              placeholder
              style="width:135px"
              @on-enter="search"
            />
          </Form-item>
    
          <!-- 资源名称 -->
          <Form-item prop="resourceName" :label="$t('module.resourceManage.resName')">
            <Input
              type="text"
              :maxlength="30"
              v-model.trim="searchForm.resourceName"
              placeholder
              style="width:135px"
              @on-enter="search"
            />
          </Form-item> 
        
          <!-- 查询\重置按钮 -->
          <Form-item prop="button" class="search-solt-btn">  
              <RPButton optType="search"  @click="search" />
              <RPButton optType="reset"  @click="reset" />
          </Form-item>
        </template>
      </Form>
    </SelfAdaption>
    <InnerPageTable ref="resourceTable" :config="tableConfig" style="margin-bottom: 0px;">
      <!-- handler bar 查询/重置-->
      <!--
      <div slot="handle-bar">
        <RPButton optType="search"  @click="search" />
        <RPButton optType="reset"  @click="reset" />
      </div>
      -->
    </InnerPageTable>
  </div>
</template>
<script>
import { queryResouceList, mountResource } from "@/api/resourceApi.js";
import { copyColumns } from "./columns";
import locales from "./locales.js";

export default {
  name: "copyresource",
  mixins: [locales],
  props: {
    menuId: {
      type: String,
      default() {
        return "";
      }
    },
    parentResourceId: {
      type: String,
      default() {
        return "";
      }
    },
    canCreateUI: {
      type: Boolean,
      default() {
        return true;
      }
    },
    canCreateAPI: {
      type: Boolean,
      default() {
        return true;
      }
    },
    canCreateFunc: {
      type: Boolean,
      default() {
        return true;
      }
    }
  },
  data() {
    return {
      searchForm: {
        resourceCode: "",
        resourceName: "",
        resourceTypes: []
      },
      actions: [
        {
          text: this.$t("common.save"),
          theme: "primary",
          handle: () => {
            this.save();
          },
          loading: false
        },
        {
          text: this.$t("common.close"),
          theme: "primary",
          handle: () => {
            this.$emit("Close");
          }
        }
      ],
      // resourceType: ["UI资源", "API资源", "功能权限"],
      resourceData: []
    };
  },
  computed: {
    tableConfig() {
      return {
        loadDataFn: ({ responseProcess, param }) => {
          queryResouceList(param).then(res => responseProcess(res.data));
        },
        columnsFn: copyColumns.bind(this),
        initParam: this.searchForm,
        autoFirst: false,
        resource: this.resourceData,
        onSelectionChange: this.onSelectionChange
      };
    },
    resourceType(){
      return [this.$t('module.resourceManage.uiResource'), this.$t('module.resourceManage.apiResource'), this.$t('module.resourceManage.functionalAuthority')]
    }
  },
  created: function() {
    this.init();
    this.$emit("SetTitle", this.$t('module.resourceManage.mountResource'));
    this.$emit("SetPageWidth", 700);
    this.$emit("SetPageActions", this.actions);
  },
  methods: {
    init() {
      if (this.canCreateUI) {
        this.searchForm.resourceTypes.push(1);
      }
      if (this.canCreateAPI) {
        this.searchForm.resourceTypes.push(2);
      }
      if (this.canCreateFunc) {
        this.searchForm.resourceTypes.push(3);
      }
      this.$nextTick(() => {
        this.search();
      });
    },
    search() {
      //刷新列表
      this.$refs["resourceTable"].load(this.searchForm);
    },
    reset() {
      this.$refs["resourceForm"].resetFields();
      this.search();
    },
    save() {
      let selectedRow = this.$refs["resourceTable"].getSelectioned();
      if (!selectedRow || selectedRow.length == 0) {
        this.$message.error({
          content: this.$t('module.resourceManage.selectMountResource'),
          duration: 3
        });
        return;
      }
      this.actions[0].loading = true;
      let param = {
        menuId: this.menuId,
        parentResourceId: this.parentResourceId,
        resourceId: selectedRow[0].id
      };
      // $store
      //   .dispatch("CopyResource", param)
      mountResource(param)
        .then(response => {
          this.actions[0].loading = false;
          this.$message.success({
            content: this.$t('module.resourceManage.mountSuccess'),
            duration: 3
          });
          //关闭当前窗口
          this.$emit("Close", true);
        })
        .catch(data => {
          this.actions[0].loading = false;
        });
    },
    onSelectionChange(selection) {
      // console.log(this.$refs["resourceTable"].getSelectioned());
      // debugger;
      // this.$refs["resourceTable"].getTableObj().selectAll(false);
      // let resourceData = this.$refs["resourceTable"].getSelectioned();
      // resourceData = [];
    }
  }
};
</script>
